<template>
    <div class="echarts">
        <div id="echart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            myChart: {}
        }
    },
    props: {
        chartData: {
            type: Object,
            default: () => []
        }
    },
    created() {
        this.$nextTick(() => {
            this.loadEchart()
        })
    },
    mounted() {
        const _this = this
        window.onresize = function() {
            _this.myChart.resize()
        }
    },
    methods: {
        loadEchart() {
            this.myChart = echarts.init(document.getElementById('echartsContainer'))
            this.myChart.setOption({
                title: {
                    text: '月度合计反馈关闭率',
                    left: 'center'

                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(parmars) {
                        return '合计关闭率' + parmars.value + '%'
                    }
                },
                xAxis: {
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisTick: {
                        alignWithLabel: true
                    }
                },

                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} %'
                    },
                    show: true
                },
                series: [{
                    name: 'Direct',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true,
                        formatter: function(parmars) {
                            return parmars.value + '%'
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [10, 20, 30, 60, 40, 20, 5, 80, 90, 6, 54, 23]
                    // label: {
                    //     show: true,
                    //     position: 'inside',
                    //     normal: {
                    //     }
                    // }

                }]
            })
            this.myChart.resize()
        }
    }
}
</script>

<style>
#echart {
    width: 100%;
    height: 300px;
}
</style>
